<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex align-stretch benben-position-layout flex addProject_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center justify-between flex-sub addProject_fd0_0'>
					<view class='flex align-center addProject_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  addProject_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex align-center'>
						<text class='addProject_fd0_0_c1_c0'>添加服务</text>
					</view>
					<view class='flex align-center addProject_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-center justify-center benben-flex-layout addProject_flex_1"
				v-if="serviceData.examine=='3'">
				<text class='addProject_fd1_0'>审核失败，提供的信息有误</text>
				<view>
					<text class='addProject_fd1_0'>失败原因：</text>
					<text class='addProject_fd1_0'>{{serviceData.reject_reason}}</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout addProject_flex_2">
				<view class='flex flex-wrap align-center addProject_fd2_0'>
					<view class='flex flex-wrap align-center addProject_fd2_0_c0'>
					</view>
					<text class='addProject_fd2_0_c1'>项目标题</text>
				</view>
				<view class='flex-wrap align-center flex addProject_fd2_1'>
					<textarea class='flex addProject_input_fd2_1' confirm-type="done" :placeholder="'请输入商品的标题'"
						:maxlength="120" placeholder-style="color:#999;font-size:28rpx"
						v-model="serviceData.service_title" />

				</view>
				<view class='flex flex-wrap align-center addProject_fd2_2'>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_0'>
					<view class='flex flex-wrap align-center addProject_fd2_0_c0'>
					</view>
					<text class='addProject_fd2_0_c1'>项目图片</text>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_4'>
					<benben-images-upload ref="benbenImagesUploadfd2_4_c0" :img-list.sync="serviceData.picture"
						:img-ids.sync="image" :maxlength="9">
						<template #content="{ num, maxlength, isShow, imgList }">
							<view class="flex flex-wrap align-start flex">
								<view v-for="(image, index) in imgList" :key="index"
									class='flex position-relative addProject_fd2_4_c00'>
									<text class='fu-iconfont2 position-absolute addProject_fd2_4_c000'
										@tap.stop="$refs.benbenImagesUploadfd2_4_c0.delImage(index)">&#xE8E7;</text>
									<image class='addProject_fd2_4_c001'
										@tap.stop="$refs.benbenImagesUploadfd2_4_c0.previewImage(index)"
										mode="aspectFill" :src='image'></image>
								</view>
								<image class='addProject_fd2_4_c01'
									@tap.stop="$refs.benbenImagesUploadfd2_4_c0.manyChooseImage()" v-if="isShow"
									mode="aspectFit" :src='STATIC_URL+"104.jpg"'></image>
							</view>
						</template>
					</benben-images-upload>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_2'>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_0'>
					<view class='flex flex-wrap align-center addProject_fd2_0_c0'>
					</view>
					<text class='addProject_fd2_0_c1'>项目长图</text>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_70001'>
					<benben-image-upload :path.sync="serviceData.top_img" :img-id.sync="serviceData.top_img"
						:is-cropping="false" :is-show-clean="true" class="upload position-relative">
						<text v-if="serviceData.top_img" data-type="clean"
							@click.stop="serviceData.top_img = '';serviceData.top_img=''"
							class='fu-iconfont2 position-absolute addProject_fd2_4_c0000001'>&#xE8E7;</text>
						<image class=" addProject_fd2_4_c0010001" mode="aspectFill"
							:src="serviceData.top_img ? serviceData.top_img : STATIC_URL+'104.jpg'"></image>
					</benben-image-upload>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_2'>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_0'>
					<view class='flex flex-wrap align-center addProject_fd2_0_c0'>
					</view>
					<text class='addProject_fd2_0_c1'>服务详情</text>
				</view>
				<view class='flex flex-wrap addProject_fd2_7'>
					<textarea class='flex addProject_input_fd2_7' confirm-type="done" :placeholder="'请输入服务详情'"
						:maxlength="240" placeholder-style="color:#999;font-size:28rpx"
						v-model="serviceData.service_details" />

				</view>
				<view class='flex flex-wrap align-center addProject_fd2_2'>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_0'>
					<view class='flex flex-wrap align-center addProject_fd2_0_c0'>
					</view>
					<text class='addProject_fd2_0_c1'>服务流程</text>
				</view>
				<view class='flex-wrap align-center flex addProject_fd2_1'>
					<textarea class='flex addProject_input_fd2_1' confirm-type="done" :placeholder="'请输入服务流程'"
						:maxlength="240" placeholder-style="color:#999;font-size:28rpx"
						v-model="serviceData.describe" />

				</view>
				<view class='flex flex-wrap align-center addProject_fd2_2'>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_0'>
					<view class='flex flex-wrap align-center addProject_fd2_0_c0'>
					</view>
					<text class='addProject_fd2_0_c1'>购买须知</text>
				</view>
				<view class='flex-wrap align-center flex addProject_fd2_1'>
					<textarea class='flex addProject_input_fd2_1' confirm-type="done" :placeholder="'请输入提示用户购买须知的内容'"
						:maxlength="240" placeholder-style="color:#999;font-size:28rpx"
						v-model="serviceData.purchase_notes" />

				</view>
				<view class='flex flex-wrap align-center addProject_fd2_2'>
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_15'>
					<text class='addProject_fd2_15_c0'>*</text>
					<text class='addProject_fd2_0_c1'>售价</text>
					<benben-input class='flex-sub addProject_fd2_15_c2' type="digit" :placeholder="`请输入售价`"
						confirm-type="done" :maxlength="10" placeholder-style="color:#999;font-size:28rpx"
						v-model="serviceData.deposit_money" />
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_15'>
					<text class='addProject_fd2_0_c1'>原价</text>
					<benben-input class='flex-sub addProject_fd2_15_c2' type="digit" :placeholder="`请输入原价`"
						confirm-type="done" :maxlength="10" placeholder-style="color:#999;font-size:28rpx"
						v-model="serviceData.scribe_money" />
				</view>
				<view class='flex flex-wrap align-center addProject_fd2_17' @tap.stop="pickerDiy1682749960971=true">
					<text class='addProject_fd2_15_c0'>*</text>
					<text class='addProject_fd2_0_c1'>分类</text>
					<benben-input class='flex-sub addProject_fd2_15_c2' type="text" :placeholder="`请选择分类`"
						confirm-type="done" :maxlength="-1" :disabled='true'
						placeholder-style="color:#999;font-size:28rpx" v-model="serviceData.servicecategory_name" />
					<text class='fu-iconfont2  addProject_fd2_17_c3'>&#xe7f2;</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!--分类选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1682749960971"
				:label.sync='serviceData.servicecategory_name' :value.sync='serviceData.servicecategory_id'
				:options='classificationType' mode='selector' :mask-show='true' :timeout='true' :picker-height='88'
				default-type='aid' :default-props='{"label":"category_name","value":"aid"}'>
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between addProject_picker3_0'>
						<text class='addProject_picker3_0_c0'
							@tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
						<text class='addProject_picker3_0_c1'>请选择分类</text>
						<text class='addProject_picker3_0_c2'
							@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
					</view>
				</template>
			</benben-picker>
			<!--分类选择器结束 -->
			<view class="flex flex-wrap align-start justify-center benben-position-layout flex addProject_flex_4">
				<button class='addProject_fd4_0' @tap.stop="postAddServiceFunc()">提交</button>

			</view>
			<view :style="{height: '120rpx'}"></view>


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"pickerDiy1682749960971": false,
				"classificationType": [],
				"classificationLable": "",
				"biaoti": "",
				"tupian": "",
				"miaoshu": "",
				"fuwuxiangqing": "",
				"dingjinjine": "",
				"serviceData": {
					"aid": "",
					"service_title": "",
					"icon": "",
					"picture": [],
					"describe": "",
					"deposit_money": "",
					"suit_crowds": "",
					"project_efficacy": "",
					"sales_volume": "",
					"service_time": "",
					"examine": "",
					"reject_reason": "",
					"usermerchant_id": "",
					"servicecategory_id": "",
					"purchase_notes": "",
					"servicecategory_name": "",
					"service_details": "",
					"scribe_money": ""
				},
				"image": "",
				"sexLable": "",
				"skillLable": "",
				"addressLable": "",
				"shopID": "",
				"aid": ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			/**
			 * @returns 
			 * Android       安卓
			 * IOS       苹果
			 * Web       H5 或 pc
			 * Wechat       微信小程序
			 * Alipay       支付宝小程序
			 * Baidu       百度小程序
			 * ByteBounce       抖音小程序
			 * 360       360小程序
			 * FastApp       快应用
			 */
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			}
		},
		watch: {},
		onLoad(options) {
			let {
				aid,
				shopID
			} = options
			if (aid !== undefined) this.aid = aid
			if (shopID !== undefined) this.shopID = shopID
			this.getServiceFunc()
			this.getClassificationFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.shopID = uni.getStorageSync('shopID') || ''
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//提交服务列表
			async postAddServiceFunc() {
				if (!validate(this.serviceData.service_title, 'require')) {
					this.$message.info('项目标题不能为空');
					return false;
				}
				if (!validate(this.image, 'require')) {
					this.$message.info('项目图片不能为空');
					return false;
				}
				if (!validate(this.serviceData.describe, 'require')) {
					this.$message.info('服务流程不能为空');
					return false;
				}
				if (!validate(this.serviceData.purchase_notes, 'require')) {
					this.$message.info('购买须知不能为空');
					return false;
				}
				if (!validate(this.serviceData.deposit_money, 'require')) {
					this.$message.info('售价不能为空');
					return false;
				}
				if (Number(this.serviceData.deposit_money) >= Number(this.serviceData.scribe_money)) {
					this.$message.info('售价不能大于等于原价');
					return false;
				}
				if (!validate(this.serviceData.servicecategory_id, 'require')) {
					this.$message.info('分类不能为空');
					return false;
				}
				if (this.aid == '') {
					//请求方法
					//数据验证
					let data646c93281240f = await this.$api.dbPost(global.apiUrls.post646c93281240f, {
						aid: this.serviceData.aid,
						picture: this.serviceData.picture,
						service_title: this.serviceData.service_title,
						describe: this.serviceData.describe,
						deposit_money: this.serviceData.deposit_money,
						servicecategory_id: this.serviceData.servicecategory_id,
						purchase_notes: this.serviceData.purchase_notes,
						usermerchant_id: this.shopID,
						scribe_money: this.serviceData.scribe_money,
						service_details: this.serviceData.service_details,
						top_img: this.serviceData.top_img
					});
					if (!data646c93281240f) return
					if (data646c93281240f.data.code != 1) {
						this.$message.info(data646c93281240f.data.msg);
						return
					}
					this.$message.info('添加成功');
					setTimeout(() => {
						this.$urouter.navigateBack(1);
					}, 500)
				} else if (this.aid != '') {
					//请求方法
					//数据验证

					let data646c93281240f = await this.$api.dbPost(global.apiUrls.post646c93281240f, {
						aid: this.serviceData.aid,
						picture: this.serviceData.picture,
						service_title: this.serviceData.service_title,
						describe: this.serviceData.describe,
						deposit_money: this.serviceData.deposit_money,
						servicecategory_id: this.serviceData.servicecategory_id,
						purchase_notes: this.serviceData.purchase_notes,
						usermerchant_id: this.shopID,
						scribe_money: this.serviceData.scribe_money,
						service_details: this.serviceData.service_details,
						top_img: this.serviceData.top_img
					});
					if (!data646c93281240f) return
					if (data646c93281240f.data.code != 1) {
						this.$message.info(data646c93281240f.data.msg);
						return
					}



					this.$message.info('修改成功');
					setTimeout(() => {
						this.$urouter.navigateBack(1);
					}, 500)
				}
			},
			//获取分类信息
			async getClassificationFunc() {
				//请求方法
				//数据验证

				let dataclassificationType = await this.$api.get(global.apiUrls.post63931277e2ccc, {

				});

				if (dataclassificationType.data.code != 1) {
					this.$message.info(dataclassificationType.data.msg);
					return
				}
				let infoclassificationType = dataclassificationType.data;
				this.classificationType = infoclassificationType.data

			},
			//获取服务信息
			async getServiceFunc() {
				//请求方法
				//数据验证
				let dataserviceData = await this.$api.get(global.apiUrls.post640fe2c1955f6, {
					aid: this.aid
				});

				if (dataserviceData.data.code != 1) {
					this.$message.info(dataserviceData.data.msg);
					return
				}
				let infoserviceData = dataserviceData.data;
				this.serviceData = infoserviceData.data

			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(246, 246, 246, 1);
		background-size: 100% auto;
	}

	.addProject_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.addProject_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.addProject_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.addProject_fd0_0_c0 {
		width: 180rpx;
	}

	.addProject_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.addProject_flex_1 {
		background: rgba(248, 209, 208, 1);
		background-size: 100% auto !important;
		padding: 24rpx 32rpx 24rpx 32rpx;
	}

	.addProject_fd1_0 {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(227, 29, 26, 1);
		line-height: 33rpx;
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.addProject_flex_2 {
		background: #fff;
		background-size: 100% auto !important;
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.addProject_fd2_17_c3 {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 6rpx 16rpx;
	}

	.addProject_fd2_17 {
		margin: 0rpx 24rpx 0rpx 24rpx;
		padding: 32rpx 0rpx 23rpx 0rpx;
	}

	.addProject_fd2_15_c2 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.addProject_fd2_15_c0 {
		color: rgba(255, 71, 58, 1);
	}

	.addProject_fd2_15 {
		border-bottom: 1px solid #eee;
		margin: 0rpx 24rpx 0rpx 24rpx;
		padding: 32rpx 0rpx 23rpx 0rpx;
	}

	.addProject_input_fd2_7 {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		white-space: pre-wrap;
	}

	.addProject_fd2_7 {
		margin: 0rpx 32rpx 24rpx 32rpx;
	}

	.addProject_fd2_4_c01 {
		width: 155rpx;
		height: 155rpx;
		margin: 0rpx 12rpx 24rpx 12rpx;
		border-radius: 16rpx;
	}

	.addProject_fd2_4_c001 {
		width: 155rpx;
		height: 155rpx;
		border-radius: 16rpx;
	}

	.addProject_fd2_4_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 9;
		color: #ff5536;
	}

	.addProject_fd2_4_c00 {
		margin: 0rpx 12rpx 24rpx 12rpx;
	}

	.addProject_fd2_4 {
		margin: 0rpx 0rpx 8rpx 0rpx;
		padding: 0rpx 12rpx 0rpx 12rpx;
	}

	.addProject_fd2_2 {
		background: rgba(248, 248, 248, 1);
		height: 20rpx;
		background-size: 100% auto !important;
	}

	.addProject_input_fd2_1 {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.addProject_fd2_1 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 24rpx 32rpx 24rpx;
	}

	.addProject_fd2_0_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		line-height: 40rpx;
	}

	.addProject_fd2_0_c0 {
		background: rgba(255, 97, 78, 1);
		width: 6rpx;
		height: 25rpx;
		background-size: 100% auto !important;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.addProject_fd2_0 {
		margin: 32rpx 24rpx 32rpx 24rpx;
	}

	.addProject_picker3_0_c2 {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 75, 51, 1);
		line-height: 40rpx;
	}

	.addProject_picker3_0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		line-height: 45rpx;
	}

	.addProject_picker3_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		line-height: 40rpx;
	}

	.addProject_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 100rpx;
	}

	.addProject_flex_4 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
	}

	.addProject_fd4_0 {
		background: #E31D1A;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.addProject_fd2_70001 {
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.addProject_fd2_4_c0010001 {
		width: 155rpx;
		height: 155rpx;
		border-radius: 16rpx;
	}

	.addProject_fd2_4_c0000001 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}
</style>